<template>
    <div>
        <i style="font-size:1.5em;;text-align:center;line-height:100px;width:100px;height:100px;background:black;color:#fff;display:inline-block;box-sizing:border-box;" ref="elDom">回收站</i>
    </div>
</template>

<script>
import './A.js'
export default{
    data(){
        return {
            center:{
                x:0,
                y:0
            }
        }
    },
    mounted(){
        let {x,y,height,width} = this.$refs.elDom.getBoundingClientRect()
        let computedX = x + width/2;
        let computedY = y + height/2;
        this.center.x = computedX;
        this.center.y = computedY;

        document.addEventListener('click',this.generateGarbage)
    },
    methods:{
        generateGarbage(event){
            const { clientX, clientY } = event
            this.$garbage({from:{x:clientX,y:clientY},to:this.center})
        }
    }
}
</script>
